<template>
  <div>
    <div class="antd-pro-pages-dashboard-analysis-twoColLayout">
      <a-row :gutter="24" type="flex" :style="{ marginTop: '-10px' }">
        <a-col :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
          <a-row :gutter="24" type="flex" :style="{ marginTop: '0px', backgroundColor: '#e6f7ff' }">
            <a-col :span="24" style="background-color: #fff;}">
              <div style="border: 1px solid #fff; " class="imgclass5">
                <div style=";float:left;width:100%">
                  <div
                    style="font-size: 18px; padding: 15px 0 0 22px; color: black; font-weight: 500;width:100px;float:left"
                  >
                    开通情况
                  </div>

                  <img
                    src="http://gangmao.oss-cn-shenzhen.aliyuncs.com/test/fuzhu.png"
                    width="80px"
                    height="20px"
                    style="margin-left:10px;margin-top:20px;float:left"
                  />
                  <div style="font-size:12px;margin-top:20px;float:left;font-weight:500;margin-left:25%">
                    {{ nowTime }}
                  </div>
                </div>
                <br />

                <a-row
                  :gutter="24"
                  type="flex"
                  style="margin-top:55px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
                >
                  <a-col :span="12" style="padding-right:0px">
                    <div style="font-size: 15px; padding: 15px 0px 0 0px; color: black;float:left;margin:0 10px 0 20px">
                      在途工单数
                    </div>
                    <div
                      style="
                       float:left;
                        text-align: center;
                        height: 50px;
                        width: 35px;
                        margin: auto;
                        margin: auto;
                        line-height: 45px;
                        font-size: 40px;
                        font-weight: 350;
                        margin-right:15px;
                      "
                      class="yingyinclass"
                    >
                      {{ wanwei }}
                    </div>

                    <div
                      style="
                        float:left;
                        text-align: center;
                        height: 50px;
                        width: 35px;
                        margin: auto;
                        margin: auto;
                        line-height: 45px;
                        font-size: 40px;
                        font-weight: 350;
                        margin-right:15px;
                      "
                      class="yingyinclass"
                    >
                      {{ qianwei }}
                    </div>

                    <div
                      style="
                        float:left;
                        text-align: center;
                        height: 50px;
                        width: 35px;
                        margin: auto;
                        margin: auto;
                        line-height: 45px;
                        font-size: 40px;
                        font-weight: 350;
                        margin-right:15px;
                      "
                      class="yingyinclass"
                    >
                      {{ baiwei }}
                    </div>

                    <div
                      style="
                        float:left;
                        text-align: center;
                        height: 50px;
                        width: 35px;
                        margin: auto;
                        margin: auto;
                        line-height: 45px;
                        font-size: 40px;
                        font-weight: 350;
                        margin-right:15px;
                      "
                      class="yingyinclass"
                    >
                      {{ shiwei }}
                    </div>

                    <div
                      style="
                       float:left;
                        text-align: center;
                        height: 50px;
                        width: 35px;
                        margin: auto;
                        margin: auto;
                        line-height: 45px;
                        font-size: 40px;
                        font-weight: 350;
                        margin-right:15px;
                      "
                      class="yingyinclass"
                    >
                      {{ gewei }}
                    </div>
                    <div style="margin-top:16px;padding-left:0px ;;float:left;">
                      <span style="font-size: 13px;;">较昨日 </span>
                      <span style="font-size: 13px;font-weight:600;">{{ todayCompareNum }}</span>
                      <img
                        v-if="todayCompareNum < 0"
                        src="http://gangmao.oss-cn-shenzhen.aliyuncs.com/test/up.png"
                        width="10px"
                        height="14px"
                      />
                      <img
                        v-if="todayCompareNum > 0"
                        src="http://gangmao.oss-cn-shenzhen.aliyuncs.com/test/dp.png"
                        width="10px"
                        height="14px"
                      />
                    </div>
                  </a-col>
                </a-row>
                <a-row :gutter="24" :style="{ marginTop: '-30px', width: '100%' }">
                  <a-col :span="6">
                    <a-row>
                      <div style="height:175px;width:400px;">
                        <div style="margin-left:-20%" id="container"></div>
                      </div>
                    </a-row>
                    <a-row>
                      <div style="width:400px;position:absoulte;z-index:14;text-align:left;">
                        <div style="margin-left:27%;font-size:13px;font-weight:500">快开</div>
                      </div>
                    </a-row>
                  </a-col>

                  <a-col :span="6">
                    <a-row>
                      <div style="height:175px;width:400px;">
                        <div style="margin-left:-20%" id="container2"></div>
                      </div>
                    </a-row>
                    <a-row>
                      <div style="width:400px;position:absoulte;z-index:14;text-align:left;">
                        <div style="margin-left:27%;font-size:13px;font-weight:500">查勘</div>
                      </div>
                    </a-row>
                  </a-col>

                  <a-col :span="6">
                    <a-row>
                      <div style="height:175px;width:400px;">
                        <div style="margin-left:-20%" id="container3"></div>
                      </div>
                    </a-row>
                    <a-row>
                      <div style="width:400px;position:absoulte;z-index:14;text-align:left;">
                        <div style="margin-left:27%;font-size:13px;font-weight:500">快建</div>
                      </div>
                    </a-row>
                  </a-col>
                  <a-col :span="6">
                    <a-row>
                      <div style="height:175px;width:400px;">
                        <div style="margin-left:-20%" id="htcontainer4"></div>
                      </div>
                    </a-row>
                    <a-row>
                      <div style="width:400px;position:absoulte;z-index:14;text-align:left;">
                        <div style="margin-left:25%;font-size:13px;font-weight:500">合同签订</div>
                      </div>
                    </a-row>
                  </a-col>
                </a-row>
              </div>
            </a-col>
            <a-col :span="13" style="background-color: #fff;padding-bottom: 0px;">
              <div style="border: 1px solid #fff; " class="imgclass3">
                <div style=";float:left;width:100%">
                  <div
                    style="font-size: 18px; padding: 15px 0 0 22px; color: black; font-weight: 500;width:100px;float:left"
                  >
                    总体情况
                  </div>
                  <img
                    src="http://gangmao.oss-cn-shenzhen.aliyuncs.com/test/fuzhu.png"
                    width="80px"
                    height="20px"
                    style="margin-left:10px;margin-top:20px;float:left"
                  />
                </div>
                <!-- <div style="float:right;margin-right:20px">历史时间：{{ oldStartTime }}-{{ oldEndTime }}</div> -->
                <div class="indexBj">
                  <div class="">历史时间：</div>
                  <div style="text-align:right;margin-right:20px">
                    <a-range-picker
                      @change="onChangeBj"
                      v-model="selectTimeBj"
                      :ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }"
                      class="indexRangePicker"
                      :allowClear="false"
                    />
                  </div>
                </div>
                <a-row>
                  <a-col :span="24">
                    <div style="height: 160px; width: 90%" id="container5"></div>
                  </a-col>
                </a-row>
                <div style="font-size: 16px; padding: 0px 0 0 22px; color: black;">办结情况</div>
                <a-row>
                  <a-col :span="24">
                    <div style="height: 280px; width: 100%" id="container4"></div>
                  </a-col>
                </a-row>
              </div>
            </a-col>

            <a-col :span="11" style="background-color: #fff;padding-bottom: 0px;">
              <div style="border: 1px solid #fff; " class="imgclass2">
                <div style=";float:left;width:100%">
                  <div
                    style="font-size: 18px; padding: 15px 0 0 22px; color: black; font-weight: 500;width:60px;float:left"
                  >
                    故障
                  </div>
                  <img
                    src="http://gangmao.oss-cn-shenzhen.aliyuncs.com/test/fuzhu.png"
                    width="80px"
                    height="20px"
                    style="margin-left:10px;margin-top:20px;float:left"
                  />
                </div>
                <a-row style="margin-top:80px">
                  <div style="height: 130px; width: 85%; float: left; margin: 0 0 1px 0" id="container99"></div>
                  <div style="height: 130px; width: 15%; float: left"></div>
                  <div style="height: 50px; width: 75%; text-align: center; font-size: 13px">企宽</div>
                </a-row>
                <a-row style="margin-top: 40px">
                  <div style="height: 130px; width: 85%; float: left; margin: 0 0 1px 0" id="container88"></div>
                  <div style="height: 130px; width: 15%; float: left"></div>
                  <div style="height: 50px; width: 75%; text-align: center; font-size: 13px">专线（重要集团）</div>
                </a-row>
                <a-row style="margin-top: 40px">
                  <div style="height: 130px; width: 85%; float: left; margin: 0 0 1px 0" id="container77"></div>
                  <div style="height: 50px; width: 15%; float: left"></div>
                  <div style="height: 50px; width: 75%; text-align: center; font-size: 13px">专线 （其他集团）</div>
                </a-row>
              </div>
            </a-col>
          </a-row>
        </a-col>

        <!--================================ 开通指标==========================-->
        <a-col :xl="8" :lg="24" :md="24" :sm="24" :xs="24">
          <a-row :gutter="24" type="flex" :style="{ marginTop: '0px', backgroundColor: '#fff' }">
            <a-col :span="24">
              <div style="border: 1px solid #fff; " class="imgclass4">
                <div style=";float:left;width:100%">
                  <div
                    style="font-size: 18px; padding: 15px 0 0 22px; color: black; font-weight: 500;width:100px;float:left"
                  >
                    开通指标
                  </div>
                  <img
                    src="http://gangmao.oss-cn-shenzhen.aliyuncs.com/test/fuzhu.png"
                    width="80px"
                    height="20px"
                    style="margin-left:10px;margin-top:20px;float:left"
                  />
                </div>
                <div style="margin-top: 75px;width:100%"></div>
                <a-range-picker
                  @change="onChangeKT"
                  v-model="selectTimeKT"
                  :ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }"
                  style="width:55%;margin:0 0 15px 40%"
                  :allowClear="false"
                />
                <a-row>
                  <a-col :span="6" style="padding-right:0">
                    <div class="ktzbThree">查勘及时率</div>
                  </a-col>
                  <a-popover title="查勘" trigger="hover" placement="topLeft">
                    <template slot="content">
                      <p>及时工单量：{{ ckTimelyNum }}</p>
                      <p>工单总量：{{ ckNum }}</p>
                    </template>
                    <a-col :span="17" style="background-color:#71bffe38;border-radius:3px;">
                      <a-button @click="seeWorkOrderList(2)" class="jdtclass" :style="kkstyle">{{
                        kkpercentage
                      }}</a-button>
                    </a-col>
                  </a-popover>
                </a-row>

                <a-row>
                  <div style="margin-top: 15px;width:100%"></div>
                  <a-col :span="6" style="padding-right:0">
                    <div class="ktzbThree">合同签订及时率</div>
                  </a-col>
                  <a-popover title="合同" trigger="hover" placement="topLeft">
                    <template slot="content">
                      <p>及时工单量：{{ htTimelyNum }}</p>
                      <p>工单总量：{{ htNum }}</p>
                    </template>
                    <a-col :span="17" style="background-color:#71bffe38;border-radius:3px;">
                      <a-button @click="seeWorkOrderList(4)" class="jdtclass" :style="ckstyle">{{
                        ckpercentage
                      }}</a-button>
                    </a-col>
                  </a-popover>
                </a-row>
                <a-row style="margin: 0 0 15px 0">
                  <div style="margin-top: 15px;width:100%"></div>
                  <a-col :span="6" style="padding-right:0">
                    <div class="ktzbThree">开通及时率</div>
                  </a-col>
                  <a-popover title="开通" trigger="hover" placement="topLeft">
                    <template slot="content">
                      <p>及时工单量：{{ ktTimelyNum }}</p>
                      <p>工单总量：{{ ktNum }}</p>
                    </template>
                    <a-col :span="17" style="background-color:#71bffe38;border-radius:3px;">
                      <a-button class="jdtclass" @click="seeWorkOrderList(5)" :style="kjstyle">{{
                        kjpercentage
                      }}</a-button>
                    </a-col>
                  </a-popover>
                </a-row>
                <a-row style="text-align: center; height: 50px">
                  <div style="font-size: 13px; font-weight: 500;color:rgba(0, 0, 0, 0.65)">福州指标</div>
                </a-row>
              </div>
            </a-col>
          </a-row>
          <!-- ================================故障指标================================== -->
          <a-row :gutter="24" type="flex" :style="{ marginTop: '0px', backgroundColor: '#fff' }">
            <a-col :span="24" style="background-color: #fff; margin-top: 0px">
              <a-row>
                <div style="border: 1px solid #fff; " class="imgclass1">
                  <div style=";float:left;width:100%">
                    <div
                      style="font-size: 18px; padding: 15px 0 0 22px; color: black; font-weight: 500;width:100px;float:left"
                    >
                      故障指标
                    </div>
                    <img
                      src="http://gangmao.oss-cn-shenzhen.aliyuncs.com/test/fuzhu.png"
                      width="80px"
                      height="20px"
                      style="margin-left:10px;margin-top:20px;float:left"
                    />
                  </div>
                  <div style="width:100%;height:45px;"></div>
                  <div style="width:100%;height:28px;"></div>
                  <div style="height: 50px;line-height:40px;left:6%;font-size:16px;color:black;position:absolute">
                    故障处理及时率({{ specialLine }})
                  </div>
                  <div style="width:100%;height:140px">
                    <div style="height: 140px; width: 95%;float:left" id="containerbulletPlot1"></div>
                  </div>
                  <div style="width:100%;height:28px;"></div>
                  <div style="height: 50px;line-height:40px;left:6%;font-size:16px;color:black;position:absolute">
                    投诉处理及时率({{ zqComplain }})
                  </div>
                  <div style="width:100%;height:140px">
                    <div style="height: 140px; width: 95%;float:left" id="containerbulletPlot2"></div>
                  </div>
                  <div style="width:100%;height:28px;"></div>
                  <div style="height: 50px;line-height:40px;left:6%;font-size:16px;color:black;position:absolute">
                    满意度({{ zqSatisfaction }})
                  </div>
                  <div style="width:100%;height:140px">
                    <div style="height: 140px; width: 95%;float:left" id="containerbulletPlot3"></div>
                  </div>
                </div>
              </a-row>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </div>

    <!-- 催办总量点击 -->
    <CbModel
      v-if="cbShow"
      v-bind:form="cbform"
      @cancelEvent="cancelEvent"
      v-bind:startTime="cbTime + ' 00:00:00'"
      v-bind:endTime="cbTime + ' 23:59:59'"
    ></CbModel>

    <!-- 故障环形图点击 -->
    <FaultIndexModel v-if="gzShow" v-bind:gzform="gzform" @cancelEvent="cancelEvent"></FaultIndexModel>

    <!-- 故障处理图点击 -->
    <FaultModel v-if="gzclShow" v-bind:gzform="gzform" @cancelEvent="cancelEvent"></FaultModel>

    <!-- 投诉处理图点击 -->
    <ComplaintModel v-if="tsclShow" v-bind:gzform="gzform" @cancelEvent="cancelEvent"></ComplaintModel>

    <!-- 满意度处理图点击 -->
    <SatisfiedModel v-if="myclShow" v-bind:gzform="gzform" @cancelEvent="cancelEvent"></SatisfiedModel>

    <!-- 开通工单列表 -->
    <WorkOrderList v-if="showPage" :queryParam="queryParam" @cancelEvent="cancelEvent"></WorkOrderList>
  </div>
</template>

<script>
import moment from 'moment'
import WorkOrderList from '@/views/analysisManage/opening/workOrderList/workOrderList'
import FaultIndexModel from '@/views/allModel/faultIndexModel'
import CbModel from '@/views/allModel/cbModel'
import ComplaintModel from '@/views/allModel/complaintModel'
import FaultModel from '@/views/allModel/faultModel'
import SatisfiedModel from '@/views/allModel/satisfiedModel'
import { getNowTime, getNowFormatDate, getNumBits } from '@/utils/util'
import { getHomeOpening, getOpenHomeOpening, getProblemHome, getProblemIng, getHomeEndsIs } from '@/api/public'
import { Donut, StackedColumnLine, Pie, Bar, Bullet } from '@antv/g2plot'
export default {
  components: {
    ComplaintModel,
    FaultModel,
    SatisfiedModel,
    WorkOrderList,
    CbModel,
    FaultIndexModel
  },
  data() {
    return {
      ckNowTotal: 0,
      ckOverTotal: 0,
      htNowTotal: 0,
      htOverTotal: 0,
      kjNowTotal: 0,
      kjOverTotal: 0,
      kkNowTotal: 0,
      kkOverTotal: 0,
      queryParam: {},
      nowTime: new Date().toLocaleString(),
      gzform: {},
      cbform: {},
      gzclShow: false,
      tsclShow: false,
      myclShow: false,
      cbShow: false,
      gzShow: false,
      selectTimeKT: '',
      startTimeKT: '',
      endTimeKT: '',
      dateFormat: 'YYYY-MM-DD',
      gewei: 0,
      shiwei: 0,
      baiwei: 0,
      qianwei: 0,
      wanwei: 0,
      kkstyle: {},
      ckstyle: {},
      kjstyle: {},
      kkpercentage: '0.00%',
      ckpercentage: '0.00%',
      kjpercentage: '0.00%',
      ckNum: 0,
      ckTimelyNum: 0,
      kkchaoshinum: 0,
      htNum: 0,
      htTimelyNum: 0,
      ckchaoshinum: 0,
      ktTimelyNum: 0,
      ktNum: 0,
      kjchaoshinum: 0,
      todayCompareNum: 0, //较昨日
      todayNum: 0,
      startTime: '',
      endTime: '',
      infoData: {},
      showPage: false,
      cbTime: '',
      specialLine: 0,
      zqComplain: 0,
      zqSatisfaction: 0,
      //办结
      endlsTotal: 0,
      endlsNo: 0,
      endlsAlready: 0,
      oldStartTime: '',
      oldEndTime: '',
      selectTimeBj: '',
      bjtype: 1,
      piePlot: '',
      columnLine: ''
    }
  },
  beforeCreate() {},
  created() {
    this.cbTime = getNowFormatDate()
    this.startTimeKT = getNowTime()[0]
    this.endTimeKT = getNowTime()[1]
    this.selectTimeKT = [moment(this.startTimeKT), moment(this.endTimeKT)]
    let arr = getNowTime()
    this.oldStartTime = moment()
      .subtract(1, 'years')
      .startOf('year')
      .format('YYYY-MM-DD HH:mm:ss')
    this.oldEndTime = moment().format('YYYY-MM-DD HH:mm:ss')
    this.selectTimeBj = [moment(this.oldStartTime), moment(this.oldEndTime)]
    this.startTime = arr[0] + ' 00:00:00'
    this.endTime = arr[1] + ' 23:59:59'
    this.getHomeOpeningData() //开通
    this.getOpenHomeOpeningData() //催办
    this.getProblemHomeFunction() //故障
    this.getProblemHomeIndexFunction() //故障
    this.getHomeEndsIsFunction() //办结
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      this.nowTime = new Date().toLocaleString()
    }, 1000)
  },

  methods: {
    moment,

    //是否办结数据
    getHomeEndsIsFunction() {
      let startTime = moment()
        .month(moment().month())
        .startOf('month')
        .format('YYYY-MM-DD HH:mm:ss')
      let endTime = moment()
        .month(moment().month())
        .endOf('month')
        .format('YYYY-MM-DD HH:mm:ss')
      getHomeEndsIs(startTime, endTime, this.oldStartTime, this.oldEndTime).then(
        response => {
          this.endlsAlready = response.data.num - response.data.endIs
          this.endlsNo = response.data.endIs
          let dataList = []
          let dataLineList = []
          let infoA = {}
          let infoB = {}
          infoA.区域 = '区县历史'
          infoA.value = response.data.oldCountryEndIs
          infoA.type = '单月未办结'
          infoB.区域 = '区县历史'
          infoB.数量 = response.data.oldCountry
          dataList.push(infoA)
          dataLineList.push(infoB)
          infoA = {}
          infoB = {}
          infoA.区域 = '区县历史'
          infoA.value = response.data.oldCountry - response.data.oldCountryEndIs
          infoA.type = '单月已办结'
          dataList.push(infoA)
          infoA = {}
          infoA.区域 = '区县'
          infoA.value = response.data.countryEndIs
          infoA.type = '单月未办结'
          dataList.push(infoA)
          infoA = {}
          infoA.区域 = '区县'
          infoA.value = response.data.country - response.data.countryEndIs
          infoA.type = '单月已办结'
          infoB.区域 = '区县'
          infoB.数量 = response.data.country
          dataLineList.push(infoB)
          dataList.push(infoA)
          infoA = {}
          infoB = {}
          infoA.区域 = '市级历史'
          infoA.value = response.data.oldCityEndIs
          infoA.type = '单月未办结'
          dataList.push(infoA)
          infoA = {}
          infoA.区域 = '市级历史'
          infoA.value = response.data.oldCity - response.data.oldCityEndIs
          infoA.type = '单月已办结'
          infoB.区域 = '市级历史'
          infoB.数量 = response.data.oldCity
          dataLineList.push(infoB)
          dataList.push(infoA)
          infoA = {}
          infoB = {}
          infoA.区域 = '市级'
          infoA.value = response.data.cityEndIs
          infoA.type = '单月未办结'
          dataList.push(infoA)
          infoA = {}
          infoA.区域 = '市级'
          infoA.value = response.data.city - response.data.cityEndIs
          infoA.type = '单月已办结'
          infoB.区域 = '市级'
          infoB.数量 = response.data.city
          dataList.push(infoA)
          dataLineList.push(infoB)
          if (this.bjtype == 1) {
            this.setEndlsChart(dataList, dataLineList)
          } else {
            this.piePlot.destroy()
            this.columnLine.destroy()
            this.setEndlsChart(dataList, dataLineList)
          }
        },
        error => {}
      )
    },
    //办结图表数据
    setEndlsChart(uvBillData, transformData) {
      const data5 = [
        {
          type: '单月未办结',
          value: this.endlsNo
        },
        {
          type: '单月办结',
          value: this.endlsAlready
        }
      ]
      this.piePlot = new Pie('container5', {
        forceFit: true,
        radius: 0.8,
        data: data5,
        angleField: 'value',
        colorField: 'type',
        label: {
          visible: true,
          type: 'spider'
        },
        label:{
         type:'outer-center'
        },
        events: {}
      })
      this.piePlot.render()
      this.columnLine = new StackedColumnLine('container4', {
        data: [uvBillData, transformData],
        xField: '区域',
        yField: ['value', '数量'],
        columnStackField: 'type'
      })
      this.columnLine.render()
    },
    //故障指标
    getProblemHomeIndexFunction() {
      let startTime = getNowFormatDate() + ' 00:00:00'
      let endTime = getNowFormatDate() + ' 23:59:59'
      getProblemHome(startTime, endTime).then(
        response => {
          let specialLineInNum = Math.round(response.data.specialLineInNum)
          let specialLineOverNum = Math.round(response.data.specialLineOverNum)
          let zqInNum = Math.round(response.data.zqInNum)
          let zqOverNum = Math.round(response.data.zqOverNum)
          let zqSatisfiedNum = Math.round(response.data.zqSatisfiedNum)
          let zqNotSatisfiedNum = Math.round(response.data.zqNotSatisfiedNum)
          this.specialLine = response.data.specialLine
          this.zqComplain = response.data.zqComplain
          this.zqSatisfaction = response.data.zqSatisfaction
          this.setGuzhangZb(specialLineInNum, specialLineOverNum, zqInNum, zqOverNum, zqSatisfiedNum, zqNotSatisfiedNum)
        },
        error => {}
      )
    },
    //故障指标
    setGuzhangZb(specialLineInNum, specialLineOverNum, zqInNum, zqOverNum, zqSatisfiedNum, zqNotSatisfiedNum) {
      const bulletPlot1 = new Bullet('containerbulletPlot1', {
        data: [
          {
            title: ' ',
            measures: [specialLineInNum, specialLineOverNum],
            targets: [30, 50]
          }
        ],
        rangeMax: 100,
        markerColors: ['#5B8FF9', '#5AD8A6'],
        legend: {
          custom: true,
          position: 'bottom',
          items: [
            {
              value: '及时工单量',
              name: '及时工单量',
              marker: { symbol: 'square', style: { fill: 'rgb(99, 149, 249) ', r: 5 } }
            },
            {
              value: '超时工单量',
              name: '超时工单量',
              marker: { symbol: 'square', style: { fill: 'rgb(98, 218, 171, 1)', r: 5 } }
            }
          ]
        },
        label: {
          offset: -6,
          style: {
            fill: '#fff'
          }
        },
        events: {
          onRingClick: e => {
            e.data.$$stackField$$ == 0 ? (this.gzform.type = 3) : (this.gzform.type = 2)

            this.gzclShow = true
          }
        }
      })
      bulletPlot1.render()
      const bulletPlot2 = new Bullet('containerbulletPlot2', {
        data: [
          {
            title: ' ',
            measures: [zqInNum, zqOverNum],
            targets: [30, 50]
          }
        ],
        rangeMax: 100,
        markerColors: ['#5B8FF9', '#5AD8A6'],
        legend: {
          custom: true,
          position: 'bottom',
          items: [
            {
              value: '及时工单量',
              name: '及时工单量',
              marker: { symbol: 'square', style: { fill: 'rgb(99, 149, 249)', r: 5 } }
            },
            {
              value: '超时工单量',
              name: '超时工单量',
              marker: { symbol: 'square', style: { fill: 'rgb(98, 218, 171, 1)', r: 5 } }
            }
          ]
        },
        label: {
          offset: -6,
          style: {
            fill: '#fff'
          }
        },
        events: {
          onRingClick: e => {
            e.data.$$stackField$$ == 0 ? (this.gzform.type = 3) : (this.gzform.type = 2)
            this.tsclShow = true
          }
        }
      })

      bulletPlot2.render()

      const bulletPlot3 = new Bullet('containerbulletPlot3', {
        data: [
          {
            title: ' ',
            measures: [zqSatisfiedNum, zqNotSatisfiedNum],
            targets: [30, 50]
          }
        ],
        rangeMax: 100,
        markerColors: ['#5B8FF9', '#5AD8A6'],
        legend: {
          custom: true,
          position: 'bottom',
          items: [
            {
              value: '满意工单量',
              name: '满意工单量',
              marker: { symbol: 'square', style: { fill: 'rgb(99, 149, 249)', r: 5 } }
            },
            {
              value: '不满意工单量',
              name: '不满意工单量',
              marker: { symbol: 'square', style: { fill: 'rgb(98, 218, 171, 1)', r: 5 } }
            }
          ]
        },
        label: {
          offset: -6,
          style: {
            fill: '#fff'
          }
        },
        events: {
          onRingClick: e => {
            e.data.$$stackField$$ == 0 ? (this.gzform.type = 3) : (this.gzform.type = 2)
            this.myclShow = true
          }
        }
      })

      bulletPlot3.render()
    },
    //故障
    getProblemHomeFunction() {
      let startTime = getNowFormatDate() + ' 00:00:00'
      let endTime = getNowFormatDate() + ' 23:59:59'
      getProblemIng(startTime, endTime).then(
        response => {
          let vipIngNum = Math.round(response.data.vipIngNum)
          let vipOverNum = Math.round(response.data.vipOverNum)
          let otherIngNum = Math.round(response.data.otherIngNum)
          let otherOverNum = Math.round(response.data.otherOverNum)
          this.setGuzhangHuan(vipIngNum, vipOverNum, otherIngNum, otherOverNum)
        },
        error => {}
      )
    },

    //故障环形图
    setGuzhangHuan(vipIngNum, vipOverNum, otherIngNum, otherOverNum) {
      const data99 = [
        {
          type: '未超时',
          value: 27
        },
        {
          type: '已超时',
          value: 25
        }
      ]
      const donutPlot99 = new Donut('container99', {
        radius: 1,
        padding: '0px',
        data: data99,
        angleField: 'value',
        colorField: 'type',
        events: {
          onRingClick: e => {
            e.data.type == '未超时' ? (this.gzform.typeFlag = 3) : (this.gzform.typeFlag = 2)
            this.gzform.type = 1
            this.gzShow = true
          }
        }
      })
      donutPlot99.render()
      const data88 = [
        {
          type: '未超时',
          value: vipIngNum
        },
        {
          type: '已超时',
          value: vipOverNum
        }
      ]
      const donutPlot88 = new Donut('container88', {
        radius: 1,
        padding: '0px',
        data: data88,
        angleField: 'value',
        colorField: 'type',
        events: {
          onRingClick: e => {
            e.data.type == '未超时' ? (this.gzform.typeFlag = 3) : (this.gzform.typeFlag = 2)
            this.gzform.type = 1
            this.gzShow = true
          }
        }
      })
      donutPlot88.render()
      const data77 = [
        {
          type: '未超时',
          value: otherIngNum
        },
        {
          type: '已超时',
          value: otherOverNum
        }
      ]
      const donutPlot77 = new Donut('container77', {
        radius: 1,
        padding: '0px',
        data: data77,
        angleField: 'value',
        colorField: 'type',
        events: {
          onRingClick: e => {
            e.data.type == '未超时' ? (this.gzform.typeFlag = 3) : (this.gzform.typeFlag = 2)
            this.gzform.type = 1
            this.gzShow = true
          }
        }
      })
      donutPlot77.render()
    },
    //开通换图环图数据
    setHuanTu() {
      const ckdata = [
        {
          type: '未超时工单',
          value: this.ckNowTotal
        },
        {
          type: '超时工单',
          value: this.ckOverTotal
        }
      ]
      const kkdata = [
        {
          type: '未超时工单',
          value: this.kkNowTotal
        },
        {
          type: '超时工单',
          value: this.kkOverTotal
        }
      ]

      const kjdata = [
        {
          type: '未超时工单',
          value: this.kjNowTotal
        },
        {
          type: '超时工单',
          value: this.kjOverTotal
        }
      ]
      const htdata = [
        {
          type: '未超时工单',
          value: this.htNowTotal
        },
        {
          type: '超时工单',
          value: this.htOverTotal
        }
      ]
      const colorA = ['#6395F9', '#62DAAB']
      const colorB = ['#6395F9']

      //1日快开
      const donutPlot = new Donut('container', {
        height: 200,
        width: 400,
        forceFit: false,
        radius: 1,
        data: kkdata,
        angleField: 'value',
        colorField: 'type',
        color: this.kkNowTotal == 0 && this.kkOverTotal == 0 ? colorB : colorA,
        legend: {
          position: 'bottom-center'
        },

        events: {
          onRingClick: e => {
            e.data.type == '超时工单'
              ? ((this.cbform.overtimeIs = '是'), (this.cbform.flag = 1),this.cbform.endIs='未办结')
              : ((this.cbform.overtimeIs = '否'), (this.cbform.flag = 1),this.cbform.endIs='未办结')
            this.cbform.type = 1
            this.cbShow = true
          }
        }
      })
      //2日查勘
      const donutPlot2 = new Donut('container2', {
        height: 200,
        width: 400,
        forceFit: false,
        radius: 1,
        padding: 'auto',
        data: ckdata,
        angleField: 'value',
        colorField: 'type',
        color: this.ckNowTotal == 0 && this.ckOverTotal == 0 ? colorB : colorA,
        legend: {
          position: 'bottom-center'
        },
        events: {
          onRingClick: e => {
            e.data.type == '超时工单'
              ? ((this.cbform.overtimeIs = '是'), (this.cbform.flag = 1),this.cbform.endIs='未办结')
              : ((this.cbform.overtimeIs = '否'), (this.cbform.flag = 1),this.cbform.endIs='未办结')
            this.cbform.type = 2
            this.cbShow = true
          }
        }
      })
      const donutPlot3 = new Donut('container3', {
        forceFit: false,
        title: {
          visible: false,
          text: '环图',
          alignTo: 'middle'
        },
        height: 200,
        width: 400,
        radius: 1,
        data: kjdata,
        angleField: 'value',
        colorField: 'type',
        color: this.kjNowTotal == 0 && this.kjOverTotal == 0 ? colorB : colorA,
        legend: {
          position: 'bottom-center'
        },
        events: {
          onRingClick: e => {
            e.data.type == '超时工单'
              ? ((this.cbform.overtimeIs = '是'), (this.cbform.flag = 1),this.cbform.endIs='未办结')
              : ((this.cbform.overtimeIs = '否'), (this.cbform.flag = 1),this.cbform.endIs='未办结')
            this.cbform.type = 3
            this.cbShow = true
          },
         
        }
      })
      const donutPlot4 = new Donut('htcontainer4', {
        forceFit: false,
        height: 200,
        width: 400,
        title: {
          visible: false,
          text: '环图'
        },
        radius: 1,
        data: htdata,
        angleField: 'value',
        colorField: 'type',
        color: this.htNowTotal == 0 && this.htOverTotal == 0 ? colorB : colorA,
        legend: {
          position: 'bottom-center'
        },
        events: {
          onRingClick: e => {
            e.data.type == '超时工单'
              ? ((this.cbform.overtimeIs = '是'), (this.cbform.flag = 1),this.cbform.endIs='未办结')
              : ((this.cbform.overtimeIs = '否'), (this.cbform.flag = 1),this.cbform.endIs='未办结')
            this.cbform.type = 4
            this.cbShow = true
          }
        }
      })
      donutPlot.render()
      donutPlot3.render()
      donutPlot2.render()
      donutPlot4.render()
    },
    //开通
    onChangeKT(date, dateStrings) {
      this.startTime = dateStrings[0] + ' 00:00:00'
      this.endTime = dateStrings[1] + ' 23:59:59'
      this.getOpenHomeOpeningData()
    },
    //办结时间选择
    onChangeBj(date, dateStrings) {
      this.bjtype = 2
      this.oldStartTime = dateStrings[0] + ' 00:00:00'
      this.oldEndTime = dateStrings[1] + ' 23:59:59'
      this.getHomeEndsIsFunction()
      // this.getOpenHomeOpeningData()
    },
    //首页左侧开通数据(开通情况)
    getHomeOpeningData() {
      getHomeOpening().then(
        response => {
          this.todayCompareNum = response.data.todayCompareNum
          let arrList = getNumBits(response.data.todayNum)
          this.gewei = arrList[4]
          this.shiwei = arrList[3]
          this.baiwei = arrList[2]
          this.qianwei = arrList[1]
          this.wanwei = arrList[0]
          this.ckNowTotal = Math.round(response.data.ckNowTotal)
          this.ckOverTotal = Math.round(response.data.ckOverTotal)
          this.htNowTotal = Math.round(response.data.htNowTotal)
          this.htOverTotal = Math.round(response.data.htOverTotal)
          this.kjNowTotal = Math.round(response.data.kjNowTotal)
          this.kjOverTotal = Math.round(response.data.kjOverTotal)
          this.kkNowTotal = Math.round(response.data.kkNowTotal)
          this.kkOverTotal = Math.round(response.data.kkOverTotal)
          this.setHuanTu()
        },
        error => {}
      )
    },

    //首页右侧开通数据(开通指标)
    getOpenHomeOpeningData() {
      getOpenHomeOpening(this.startTime, this.endTime).then(response => {
        let dataInfo = response.data
        this.ckNum = Math.round(dataInfo.ckNum)
        this.ckTimelyNum = Math.round(dataInfo.ckTimelyNum)
        this.htNum = Math.round(dataInfo.htNum)
        this.htTimelyNum = Math.round(dataInfo.htTimelyNum)
        this.ktNum = Math.round(dataInfo.ktNum)
        this.ktTimelyNum = Math.round(dataInfo.ktTimelyNum)
        let [kkpercentage, ckpercentage, kjpercentage] = [
          this.ckTimelyNum / this.ckNum,
          this.htTimelyNum / this.htNum,
          this.ktTimelyNum / this.ktNum
        ]
        if (kkpercentage > 0) {
          this.kkstyle.background = 'rgb(99, 149, 249, 1)'
          this.kkstyle.color = 'white'
          this.kkpercentage = this.toPercent(kkpercentage)
          this.kkstyle.width = this.kkpercentage
        }
        if (ckpercentage > 0) {
          this.ckstyle.background = 'rgb(99, 149, 249, 1)'
          this.ckstyle.color = 'white'
          this.ckpercentage = this.toPercent(ckpercentage)
          this.ckstyle.width = this.ckpercentage
        }
        if (kjpercentage > 0) {
          this.kjstyle.background = 'rgb(99, 149, 249, 1)'
          this.kjstyle.color = 'white'
          this.kjpercentage = this.toPercent(kjpercentage)
          this.kjstyle.width = this.kjpercentage
        }
      })
    },
    //转百分数
    toPercent(point) {
      var str = Number(point * 100).toFixed(1)
      str += '%'
      return str
    },
    //转小数
    toPoint(percent) {
      var str = percent.replace('%', '')
      str = str / 100
      return str
    },

    //开通指标弹窗
    seeWorkOrderList(type) {
      //type 0 快开占比总量 1 快开，2 查勘，3 快建 4：合同 5：开通
      this.queryParam.type = type
      this.queryParam.startTime = this.startTime
      this.queryParam.endTime = this.endTime
      this.showPage = true
    },
    //取消弹窗
    cancelEvent() {
      this.cbShow = false
      this.gzShow = false
      this.gzclShow = false
      this.tsclShow = false
      this.myclShow = false
      this.showPage = false
    },
    handleClick() {
      this.$refs.cbmodel.sing()
    }
  }
}
</script>
<style>
.ktzbThree {
  font-size: 15px;
  color: black;
  /* font-weight:500;  */
  padding: 10px 0 0 20px;
}
.dd {
  border: 1px solid;
}

/* .canvas {
  widows: 200px;
  height: 200px;
} */
.yy {
  box-shadow: -12px -5px 3px -1px #40a9ffd9, 0 -12px 3px -1px #40a9ffd9, 0 12px 3px -1px #40a9ffd9,
    12px 3px 10px -1px #40a9ffd9;
}
.yingyinclass {
  width: 35px;
  height: 50px;
  margin: 10px;
  background: linear-gradient(#40a9ff, #40a9ff) left top, linear-gradient(#40a9ff, #40a9ff) left top,
    linear-gradient(#40a9ff, #40a9ff) right top, linear-gradient(#40a9ff, #40a9ff) right top,
    linear-gradient(#40a9ff, #40a9ff) left bottom, linear-gradient(#40a9ff, #40a9ff) left bottom,
    linear-gradient(#40a9ff, #40a9ff) right bottom, linear-gradient(#40a9ff, #40a9ff) right bottom;
  background-repeat: no-repeat;
  background-size: 1.5px 10px, 10px 1.5px;
}
.yingyinclass2 {
  width: 100%;
  height: 440px;
  margin: 0px;
  background: linear-gradient(#40a9ff, #40a9ff) left top, linear-gradient(#40a9ff, #40a9ff) left top,
    linear-gradient(#40a9ff, #40a9ff) right top, linear-gradient(#40a9ff, #40a9ff) right top,
    linear-gradient(#40a9ff, #40a9ff) left bottom, linear-gradient(#40a9ff, #40a9ff) left bottom,
    linear-gradient(#40a9ff, #40a9ff) right bottom, linear-gradient(#40a9ff, #40a9ff) right bottom;
  background-repeat: no-repeat;
  background-size: 1.5px 10px, 10px 1.5px;
}
.yingyinclass3 {
  width: 100%;
  height: 50px;
  margin: 0px;
  background: linear-gradient(#40a9ff, #40a9ff) left top, linear-gradient(#40a9ff, #40a9ff) left top,
    linear-gradient(#40a9ff, #40a9ff) right top, linear-gradient(#40a9ff, #40a9ff) right top,
    linear-gradient(#40a9ff, #40a9ff) left bottom, linear-gradient(#40a9ff, #40a9ff) left bottom,
    linear-gradient(#40a9ff, #40a9ff) right bottom, linear-gradient(#40a9ff, #40a9ff) right bottom;
  background-repeat: no-repeat;
  background-size: 1.5px 10px, 10px 1.5px;
}
.imgclass5 {
  background: url(http://gangmao.oss-cn-shenzhen.aliyuncs.com/test/%E7%BB%84%2047%402x.png);
  background-size: 100% 360px;
  height: 360px;
}
.imgclass4 {
  background: url(http://gangmao.oss-cn-shenzhen.aliyuncs.com/test/%E7%BB%84%2048%402x.png);
  background-size: 100% 405px;
  height: 405px;
}
.imgclass3 {
  background: url(http://gangmao.oss-cn-shenzhen.aliyuncs.com/test/%E7%BB%84%2049%402x.png);
  background-size: 100% 600px;
  height: 600px;
}
.imgclass2 {
  background: url(http://gangmao.oss-cn-shenzhen.aliyuncs.com/test/%E7%BB%84%2050%402x.png);
  background-size: 100% 600px;
  height: 600px;
}
.imgclass1 {
  background: url(http://gangmao.oss-cn-shenzhen.aliyuncs.com/test/%E7%BB%84%2051%402x.png);
  background-size: 100% 555px;
  height: 555px;
}
.jdtclass {
  height: 40px;
  width: 100%;
  padding: 5px 0;
  color: black;
}
.huantu {
  position: relative;
  z-index: 111;
}
.indexHistoryTime {
}
.indexRangePicker {
  width: 300px;

  line-height: 90px;
}
.indexBj {
  display: flex;
  flex-direction: row;
  position: absolute;
  right: 30px;
  line-height: 90px;
  z-index: 11;
  top: 20px;
}
</style>
